<template>
    <el-header height="70px">
        <div class="header-container">
            <div class="left-logo">
                <router-link to="/discoverMusic"></router-link>
            </div>
            <div class="center-tablist">
                <ul>
                    <template  v-for="(item, index) in headerStores.routerArr" :key="index" :class="item.path ? 'active' : ''" >
                        <li v-if="!item.meta?.hidden ">
                        <router-link :to="item.path">
                            <em>{{ item.title }}</em>
                            <i></i>
                        </router-link>
                    </li>
                    </template>
                </ul>
            </div>
            <div class="header-search">
                <div class="search">
                    <input type="text" placeholder="音乐/视频/电台/用户">
                </div>
            </div>
            <div class="header-czzzx">
                <a target="_blank" href="https://music.163.com/#/login?targetUrl=%2Fcreatorcenter">创作者中心</a>
            </div>
            <div class="header-login" v-if="!loginUseStore.loginStatus && loginUseStore.cookie==null">
                <span @click="loginUseStore.flag=true">登录</span>
            </div>
            <div class="header-login-true" v-else>
                <div class="header-login-true-img">
                    <img :src="loginUseStore.profile?.avatarUrl" alt="">
                    <i>{{ loginUseStore.userMessage?.newMsgCount }}</i>
                </div>
                <div class="header-login-true-list">
                    <ul>
                        <li>
                            <a href="">
                                <i style="background-position: 0 -80px;"></i><em>我的主页</em>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i style="background-position: -20px -120px;"></i><em>我的消息</em>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i style="background-position: 0 -100px;"></i><em>我的等级</em>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i style="background-position: 0 -221px;"></i><em>VIP会员</em>
                            </a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="">
                                <i style="background-position: 0 -140px;"></i><em>个人设置</em>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i style="background-position: -20px -142px;"></i><em>实名认证</em>
                            </a>
                        </li>
                    </ul>
                    <ul>
                        <li @click="loginout">
                            <a href="javascript:;">
                                <i style="background-position: 0 -200px;"></i><em>退出</em>
                            </a>
                        </li>
                    </ul>
                    <i class="arr"></i>
                </div>
            </div>
        </div>
    </el-header>
    <div class="tabbar2">
        <div class="header-container">
            <ul>
                <template v-for="(item, index) in childrenArr" :key="index">
                    <li v-if="!item.meta.hidden">
                        <router-link :to="item.path"><em>{{ item.title }}</em></router-link>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import headerStore from '@/store/modules/header'
import loginStore from '@/store/modules/login';
const router = useRouter()
const routerMeta = ref(router.options.routes)
const headerStores = headerStore()
let childrenArr = ref()
const loginUseStore = loginStore()
watch(() => router.currentRoute.value.fullPath, (newPath) => {
    routerMeta.value.forEach((item) => {
        if (newPath.indexOf(item.path) != -1) {
            childrenArr.value = item?.children
        }
    })
})
const loginout = ()=>{
    loginUseStore.getLoginOut()
}
</script>

<style scoped lang="less">
.el-header {
    padding: 0;
}

header {
    background: #242424;
    border-bottom: 1px solid #000;
    width: 100%;

    .header-container {
        display: flex;
    }

    .left-logo {
        width: 176px;
        background: url(../../assets/images/topbar.png) no-repeat 0 9999px;
        background-position: 0 0;
        height: 69px;

        a {
            display: block;
            width: 100%;
            height: 100%;
            padding-right: 20px;
        }
    }

    .center-tablist {
        ul {
            display: flex;

            li {
                height: 70px;
                font-size: 14px;
                position: relative;

                

                a {
                    display: block;
                    padding: 0 19px;
                    text-align: center;
                    line-height: 70px;
                    color: #ccc;
                    &.router-link-active {
                    background: #000;
                    color: #fff;

                    i {
                        display: block;
                    }
                }

                    i {
                        display: none;
                        position: absolute;
                        left: 50%;
                        top: 64px;
                        width: 12px;
                        height: 7px;
                        margin-left: -6px;
                        overflow: hidden;
                        background: url(../../assets/images/topbar.png) no-repeat -226px 0;
                    }

                    &:hover {
                        background: #000;
                        color: #fff;
                    }
                }
            }
        }
    }
    .header-search{
        width: 158px;
        height: 32px;
        margin-top: 19px;
        background: url(../../assets/images/topbar.png) no-repeat;
        background-position: 0 -99px;
        background-color: #fff;
        border-radius: 32px;
        margin-left: 10px;
        .search{
            position: relative;
            margin: 8px 0 0 30px;
            input{
                width: 95%;
                margin: 0;
                padding: 0;
                background: transparent;
                border: 0;
                outline: none;
                font-size: 12px;
            }
        }
    }
    .header-czzzx{
        margin: 19px 0 0 12px;
        a{
            display: block;
            width: 90px;
            height: 32px;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid #4F4F4F;
            background-position: 0 -140px;
            line-height: 31px;
            color: #ccc;
            font-size: 12px;
            border-radius: 20px;
            &:hover{
                border-color: white;
            }
        }
    }
    .header-login{
        margin-left: 20px;
        font-size: 14px;
        cursor: pointer;
        line-height: 70px;
        color: #787878;
    }
    .header-login-true{
        height: 45px;
        margin: 19px 0 0 20px;
        padding: 0 22px 0 0;
        background-position: right -47px;
        position: relative;
        &:hover{
            .header-login-true-list{
                display: block;
            }
        }
        .header-login-true-img{
            width: 30px;
            height: 30px;
            margin-top: 1px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                border-radius: 30px;
            }
            i{
                position: absolute;
                display: inline-block;
                min-width: 17px;
                height: 17px;
                padding: 0 4px;
                box-sizing: border-box;
                background: #C20C0C;
                border-radius: 18px;
                border: 1px solid #242424;
                line-height: 16px;
                font-size: 12px;
                white-space: nowrap;
                color: #fff;
                text-align: center;
                top: -5px;
                left: 20px;
            }
        }
        .header-login-true-list{
            position: absolute;
            display: none;
            top: 38px;
            right: -43px;
            width: 158px;
            background: #2b2b2b;
            border: 1px solid #202020;
            box-shadow: 0 8px 24px 0 rgba(0,0,0,0.50);
            border-radius: 4px;
            z-index: 666;
            ul{
                li{
                    float: left;
                    box-sizing: border-box;
                    width: 100%;
                    a{
                        float: left;
                        box-sizing: border-box;
                        width: 100%;
                        height: 34px;
                        line-height: 34px;
                        position: relative;
                        overflow: hidden;
                        padding-left: 24px;
                        color: #ccc;
                        font-size: 12px;
                        &:hover{
                            background: #353535;
                            text-decoration: none;
                            color: #fff;
                        }
                        i{
                            float: left;
                            width: 18px;
                            height: 18px;
                            margin: 7px 10px 0 0;
                            font-style: normal;
                            text-align: left;
                            font-size: inherit;
                            background: url(../../assets/images/toplist.png) no-repeat;
                        }
                        em{
                            float: left;
                            width: 100px;
                        }
                    }
                }
            }
            .arr{
                position: absolute;
                top: -8px;
                left: 50%;
                width: 14px;
                height: 8px;
                margin-left: -8px;
                background: url(../../assets//images/toplist.png);
                background-position: -20px 0;
            }
        }
    }
}

.tabbar2 {
    min-height: 5px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
    &.tabbar2none{
        height: 5px;
    }

    ul {
        padding-left: 180px;
        display: flex;

        li {
            height: 34px;
            text-align: center;

            a {
                display: block;
                height: 100%;
                &.router-link-exact-active{
                    em{
                        background: #9B0909;
                    }
                }

                em {
                    display: inline-block;
                    height: 20px;
                    padding: 0 13px;
                    margin: 7px 17px 0;
                    border-radius: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    color: white;
                    &:hover{
                        background: #9B0909;
                    }
                }
            }
        }
    }
}
</style>    